<template>
	<view class="content">
		<tarbar class="top-bar"><h4 class="tb_solt">畅聊</h4></tarbar>
		<view class="main">
			<scroll-view scroll-y="true">
				<view class="friends" @tap="goNotify" v-if="getSingleNotifi.genre">
					<view class="friend-list">
						<view class="friend-list-l">
							<text class="tip" v-if="getNotifySum">{{ getNotifySum }}</text>
							<image src="../../static/images/index/apply.png"></image>
						</view>
						<view class="friend-list-r">
							<view class="top">
								<view class="name">系统通知</view>
								<view class="time">{{ getSingleNotifi.date | dateFormat }}</view>
							</view>
							<view class="news">{{getSingleNotifi.genre == 'application'?"好友申请通知":"群通知"}}</view>
						</view>
					</view>
				</view>
				<view class="friends">
					<view class="friend-list" @longpress="longPress(item, $event)" @tap="goChat(item.id, item.type)" v-for="(item, index) in getDialogList" :key="item.id">
						<view class="friend-list-l">
							<text class="tip" v-if="item.unRead > 0">{{ item.unRead }}</text>
							<image mode="aspectFill" :src="item.avatars"></image>
							<image class="group_img" src="../../static/images/index/group.png" mode="aspectFill" v-if="item.type == 'group'"></image>
						</view>
						<view class="friend-list-r">
							<view class="top">
								<view class="name">{{ item.name }}</view>
								<view class="time">{{ changeTime(item.date) }}</view>
							</view>
							<view class="news" v-if="item.msgType == 'text'">
								<view v-if="item.type == 'group'">{{ item.from }}：</view>
								<rich-text :nodes="item.message"></rich-text>
							</view>
							<view class="news" v-else-if="item.msgType == 'voice'">
								<view v-if="item.type == 'group'">{{ item.from }}：</view>
								<view>语音信息</view>
							</view>
							<view class="news" v-else-if="item.msgType == 'location'">
								<view v-if="item.type == 'group'">{{ item.from }}：</view>
								<view v-if="item.type == 'group'">位置信息</view>
								<view v-if="item.type == 'group'">（{{ item.message.name }}）</view>
								<view v-if="item.type == 'private'">位置信息：</view>
								<view v-if="item.type == 'private'">{{ item.message.name }}</view>
							</view>
							<view class="news" v-else>
								<view v-if="item.type == 'group'">{{ item.from }}</view>
								<view style="padding: 0rpx 14rpx 0rpx 4rpx;" v-if="item.type == 'group'">:</view>
								<view>图片</view>
							</view>
						</view>
					</view>
				</view>
				<template v-if="getNotifySum<=0&&getDialogList.length<=0">
					<view class="empty">暂无聊天列表</view>
				</template>
			</scroll-view>
		</view>
		<view class="mask" @touchmove.stop.prevent="moveHandle" v-show="opera" @tap="hiddenOperabox"></view>
		<view class="operabox" v-show="opera" :style="operaStyle">
			<view @tap="removeChat">删除</view>
			<view>置顶</view>
		</view>
	</view>
</template>

<script>
import datas from '../../commons/js/datas.js';
import myfun from '../../commons/js/myfun.js';
import request from '../../api/request.js';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			friends: [],
			opera: false,
			operaStyle: null,
			/* 窗口尺寸 */
			winSize: {},
			id: '',
			name: ''
		};
	},
	onLoad() {
		// 连接socket.io
		this.$store.dispatch('conenct', uni.getStorageSync('token'));
		// 获取聊天列表
		this.$store.dispatch('getDialogue');
		// this.getFrinds();
		this.getWindowSize();
	},
	onShow() {
		this.$store.commit("prompt")
		// let token = uni.getStorageSync("token")
		// if(!token){
		// 	uni.navigateTo({
		// 		url:"../signin/signin"
		// 	})
		// }
	},
	computed: {
		...mapGetters(['getSingleNotifi', 'getNotifySum', 'getDialogList'])
	},
	methods: {
		// 转换时间
		changeTime: function(date) {
			return myfun.dateTime(date);
		},
		// 获取好友（真机测试时使用）
		getFrinds: function() {
			this.friends = datas.frineds();
			for (let i = 0; i < this.friends.length; i++) {
				this.friends[i].imgurl = '../../static/images/img/' + this.friends[i].imgurl;
			}
		},
		moveHandle() {},
		goChat(id, type) {
			uni.navigateTo({
				url: '../chat/chat?id=' + id + '&&type=' + type
			});
		},
		goGroupChat() {
			uni.navigateTo({
				url: '../groupchat/groupchat'
			});
		},
		goNotify() {
			uni.navigateTo({
				url: '../notify/notify'
			});
		},
		// 长按监听
		longPress(item, $event) {
			this.id = item.id;
			this.name = item.name;
			let touches = $event.touches[0];
			/* 因 非H5端不兼容 style 属性绑定 Object ，所以拼接字符 */
			if (touches.clientY > this.winSize.height / 2) {
				this.operaStyle = `bottom:${this.winSize.height - touches.clientY + 50}px;`;
			} else {
				this.operaStyle = `top:${touches.clientY}px;`;
			}
			if (touches.clientX > this.winSize.witdh / 2) {
				this.operaStyle += `right:${this.winSize.witdh - touches.clientX + 20}px`;
			} else {
				this.operaStyle += `left:${touches.clientX + 20}px`;
			}
			this.opera = true;
		},
		// 隐藏
		hiddenOperabox() {
			this.opera = false;
		},
		/* 获取窗口尺寸 */
		getWindowSize() {
			uni.getSystemInfo({
				success: res => {
					this.winSize = {
						witdh: res.windowWidth,
						height: res.windowHeight
					};
				}
			});
		},
		removeChat() {
			this.opera = false;
			uni.showModal({
				title: '提示',
				content: '确定删除与' + this.name + '的聊天吗？',
				success: async res => {
					if (res.confirm) {
						let res = await request({
							url: '/dialogue/remove',
							data: {
								token: uni.getStorageSync('token'),
								id: this.id
							},
							method: 'POST'
						});
						if (res[1].data.status) {
							this.$store.dispatch('getDialogue');
						}
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../commons/css/mycss.scss';
.main {
	box-sizing: border-box;
	padding-bottom: 0rpx;
	height: calc(100vh - 100rpx);
	scroll-view {
		height: 100%;
	}
}
.mask {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99;
}
.operabox {
	position: fixed;
	z-index: 999;
	width: 160rpx;
	font-size: 30rpx;
	box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.4);
	border-radius: 10rpx;
	background: white;
	view {
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
	}
}
.operabox view:not(:last-child) {
	border-bottom: 2rpx solid #e3e3e3;
}
.friend-list {
	height: 96rpx;
	padding: 16rpx $uni-spacing-col-base;
	&:active {
		background-color: $uni-bg-color-grey;
	}
	.friend-list-l {
		position: relative;
		float: left;
		image {
			width: 96rpx;
			height: 96rpx;
			border-radius: $uni-border-radius-base;
			background-color: $uni-color-primary;
		}
		.group_img {
			width: 30rpx;
			height: 30rpx;
			border-radius: 8rpx;
			position: absolute;
			bottom: 10rpx;
			left: 0rpx;
		}
		.tip {
			position: absolute;
			z-index: 10;
			top: -8rpx;
			left: 68rpx;
			min-width: 20rpx;
			padding: 0 8rpx;
			height: 36rpx;
			background: $uni-color-warning;
			border-radius: 18rpx;
			font-size: $uni-font-size-sm;
			color: $uni-text-color-inverse;
			line-height: 36rpx;
			text-align: center;
		}
	}
	.friend-list-r {
		padding-left: 128rpx;
		.top {
			height: 50rpx;
			.name {
				float: left;
				font-size: 36rpx;
				font-weight: 400;
				color: $uni-text-color;
				line-height: 50rpx;
			}
			.time {
				//display:none;
				float: right;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-disable;
				line-height: 50rpx;
			}
		}
	}
	.news {
		font-size: $uni-font-size-base;
		color: $uni-text-color-grey;
		line-height: 40rpx;
		width: 100%;
		vertical-align: bottom;
		view {
			display: inline-block;
		}
	}
}
/deep/ rich-text {
	display: inline-block;
	vertical-align: top;
	div {
		font-size: $uni-font-size-base !important;
		line-height: 40rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		vertical-align: bottom;
	}
	img {
		display: inline-block !important;
		vertical-align: bottom;
		width: 40rpx;
	}
}
.empty{
	height: 70vh;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #ccc;
	font-size: 32rpx;
}
</style>
